import SwiftUI

struct HikeView: View {
  var hike: Hike
  @State private var showDetail = true

  var body: some View {
    VStack(spacing: 40) {
      HStack {
        HikeGraph(hike: hike, path: \.elevation)
          .frame(width: 50, height: 30)
          .animation(nil)

        VStack(alignment: .leading) {
          Text(verbatim: hike.name)
            .font(.headline)
          Text(verbatim: hike.distanceText)
        }

        Spacer()

        Button(action: {
          withAnimation {
            self.showDetail.toggle()
          }
        }) {
          Image(systemName: "chevron.right.circle")
            .imageScale(.large)
            .rotationEffect(.degrees(showDetail ? 90 : 0))
            // .animation(nil,value: showDetail) 可以使用此句拦截上面所有动画效果
            .scaleEffect(showDetail ? 1.5 : 1)
            .padding()
            .animation(.spring, value: showDetail)
        }
      }

      if showDetail {
        HikeDetail(hike: hike)
					// 过渡动画（视图的插入和移除）
          .transition(.moveAndFade)
      }
    }
  }
}

extension AnyTransition {
	// 类型属性
  static var moveAndFade: AnyTransition {
    let insertion = AnyTransition.move(edge: .trailing).combined(with: .opacity)
    let removal = AnyTransition.scale.combined(with: .opacity)
    // asymmetric不对称动画
    return AnyTransition.asymmetric(insertion: insertion, removal: removal)
  }
}

struct HikeDetail: View {
  let hike: Hike
  @State private var dataToShow = \Hike.Observation.elevation

  var buttons = [
    ("海拔", \Hike.Observation.elevation),
    ("心率", \Hike.Observation.heartRate),
    ("步伐", \Hike.Observation.pace),
  ]

  var body: some View {
    return VStack {
      HikeGraph(hike: hike, path: dataToShow)
        .frame(height: 200, alignment: .center)

      HStack(spacing: 25) {
        ForEach(buttons, id: \.0) { value in
          Button(action: {
            self.dataToShow = value.1
          }) {
            Text(verbatim: value.0)
              .font(.system(size: 15))
              .foregroundColor(value.1 == self.dataToShow
                ? Color.gray
                : Color.accentColor)
              .animation(nil)
          }
        }
      }
    }
  }
}

#if DEBUG
  struct HikeView_Previews: PreviewProvider {
    static var previews: some View {
      VStack {
        HikeView(hike: hikes[0])
          .padding()
        Spacer()
      }
    }
  }
#endif
